<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="/resource/jquery.js"></script>
<script src="/resource/jquery.cookie.js"></script>
<script src="/resource/json.js"></script>

<script type="text/javascript">
var url = "http://10.0.0.40:9090";

function uuid() {
	var result='';
	for(var i=0; i<32; i++)
		result += Math.floor(Math.random()*16).toString(16).toUpperCase();
	return result
}

function displayMsg(msg) {
	$("#div_msg_show").html(msg);
}

function success(code) {
	if (code == 1) return true;

	return false;
}

function setCookie(user){
	$.cookie("uname", user.name, {path:"/"});
	$.cookie("uid", user.id, {path:"/"});
}

function removeCookie() {
	$.cookie("uname", null, {path:"/"});
	$.cookie("uid", null, {path:"/"});
}

function generateUUID(){
	uuid = uuid();
	$('#checkpoint').val(uuid);

	return uuid;
}

function getUUID() {
	return $('#checkpoint').val();
}

function wrapUserLoginMsg(user) {
	if (!user) return;

	name = user.name;
	uuid = generateUUID();
	return encodeURI("<script>parent.appendUser('"+ name +"', '"+ uuid +"')<\/script>");
}

function sendMsg(from, to, message, success, error){
	$.ajax({ 
		type: 'GET',
		url: url + "/xroom/send.do",
		dataType: "jsonp",
		data: {
			from: from,
			to: to,
			message : message
		},
		success : success,
		error : error
	})
}

function sendLoginMsg(user) {
	displayMsg("Send user login message...");

	//wrap messages
	message = wrapUserLoginMsg(user);
	if (!message) return;

	sendMsg(name, 'All', message, function(data){
		data = JSON.parse(data);
		if (success(data.message.code)) {
			displayMsg("Success sending message, enter room...");
			//enter chat room
			$(location).attr('href', '/room/main.html');
		}
	}, function(xhr, ajaxOptions, thrownError){
		displayMsg("Error sending user login message!");
	});
}

$(document).ready(function() {
	$("#btn_userLogin_submit").click(function(){
		displayMsg("Try login...");
		
		$("#btn_userLogin_submit").attr("disabled","disabled");
		$.ajax({ 
			type:'GET',
			url: url + "/user/checkout.do",
			dataType: "jsonp",
			data: {
				name: $("#userName").val(),
				password: $("#userPwd").val()
			},
			success : function(data){
				displayMsg("Verifying...");
				
				data = JSON.parse(data);
				//redirect to chatroom page
				if (success(data.message.code)) {
					displayMsg("Login success, init room...");
					user = data.user;
					//Set cookie
					setCookie(user);
					//Send user login message
					sendLoginMsg(user);
				}
				else {
					displayMsg("Login error : name or password error, try again please.");
				};
				$("#btn_userLogin_submit").removeAttr("disabled");
			},
			error : function(xhr, ajaxOptions, thrownError){
				displayMsg("Error status : " + xhr.status);
				$("#btn_userLogin_submit").removeAttr("disabled");
			}
		})
	})
})
</script>

</HEAD>
<BODY>

<div id="user_login">
  <div id="login_form">
	<table>
		<tbody>
			<tr>
				<td colspan="2"><div id="div_msg_show"></div></td>
			</tr>
			
			<tr>
				<td >用户名： </td>
				<td><input id="userName" type="text" value=""/></td>
			</tr>
			
			<tr>
				<td >密码： </td>
				<td><input id="userPwd" type="password" value=""/></td>
			</tr>
			
			<tr>
				<td colspan="2"><input id="btn_userLogin_submit" type="submit" value="确定" /> <input type="reset" value="Reset" /></td>
			</tr>
		</tbody>
	</table>
  </div>
  <div><a href="http://10.0.0.40:9090/openid?op=Gemantic">Login with Gemantic OpenID</a></div>
  <div><a href="http://10.0.0.40:9090/openid?op=Google">Google</a></div>
  <div><a href="http://10.0.0.40:9090/openid?op=Yahoo">Yahoo</a></div>
</div>

</BODY>
</HTML>
